<h1>Progress ring</h1>
<h4>Default</h4>
<FluentProgressRing Min="0" Max="100" Value="75"></FluentProgressRing>
<FluentProgressRing></FluentProgressRing>
<h4>Paused</h4>
<FluentProgressRing Paused="true" Min="0" Max="100" Value="75"></FluentProgressRing>
<FluentProgressRing Paused="true"></FluentProgressRing>
<h4>Custom Sizes</h4>
<div style="display: grid; grid-gap: 12px; grid-auto-flow: column;">
    <FluentProgressRing Min="0" Max="100" Value="20"></FluentProgressRing>
    <FluentProgressRing Min="0" Max="100" Value="40" style="width: 42px; height: 42px;"></FluentProgressRing>
    <FluentProgressRing Min="0" Max="100" Value="60" style="width: 62px; height: 62px;"></FluentProgressRing>
    <FluentProgressRing Min="0" Max="100" Value="80" style="width: 82px; height: 82px;"></FluentProgressRing>
    <FluentProgressRing Min="0" Max="100" Value="100" style="width: 102px; height: 102px;"></FluentProgressRing>
</div>
<div style="display: grid; grid-gap: 12px; grid-auto-flow: column;">
    <FluentProgressRing></FluentProgressRing>
    <FluentProgressRing style="width: 42px; height: 42px;"></FluentProgressRing>
    <FluentProgressRing style="width: 62px; height: 62px;"></FluentProgressRing>
    <FluentProgressRing style="width: 82px; height: 82px;"></FluentProgressRing>
    <FluentProgressRing style="width: 102px; height: 102px;"></FluentProgressRing>
</div>